<style>
    .step-content th {
        width: 100px;
    }
    .step-content td,.step-content th {
        padding: 10px;
        vertical-align: middle;
    }
    #traffic_permit_check_frame #button-frame {
        position: absolute;
        width: 100%;
        right: 8px;
        bottom: 8px;
    }
    #traffic_permit_check_frame #button-frame button {
        float: right;
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        padding: 8px 12px;
        border-radius: 2px;
        transition: all ease .2s;
    }
    #traffic_permit_check_frame #button-frame button:hover {
        background-color: #eeeeee;
        border-color: #cccccc;
        box-shadow: 0 2px 3px #cccccc;
    }
    #traffic_permit_check_frame #button-frame button:active {
        box-shadow: 0 2px 3px #cccccc inset;
    }
    #master_card_ext_info {
        position: absolute;
        z-index: 9999;
        top: -235px;
        left:0; right:0;
        height: 260px;
        background-color: #ffffff;
        border: 1px solid #999;
        border-top:none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        transition: all ease 1s;
        text-align: center;
        box-shadow: 0 2px 5px #999;
        display: none;
    }
    #master_card_ext_info td,#master_card_ext_info th {
        padding : 8px;
    }
</style>
<div class="hint-content" id="traffic_permit_check_frame">
    <section>
        <div class="step one" style="width: 882px;">
            <div class="step-heads">
                <div class="step-head" data-no="1" style="z-index: 100001; box-shadow: 0 2px 5px #bbb;">
                    <div class="step-title">通行证信息</div>
                    <div class="step-desc">车主所持通行证详细信息</div>
                </div>
            </div>
            <div class="step-content" style="height: 600px;">
                <div class="step-content-item" data-on="1" style="display: block; position: relative; overflow: hidden; height: 550px;">
                    <!-- 滑出层 -->
                    <section id="master_card_ext_info">
                        <div class="lonix frame" style="margin: 0 15px; margin-top:25px;">
                            <div class="lonix frame-title">主卡关键信息</div>
                            <div class="lonix frame-content">
                                <table style="width: 100%;">
                                    <tr>
                                        <th>通行证编号：</th>
                                        <td colspan="3" style="position: relative;"><input disabled type="text" style="position: absolute; top:0; width: 100%; left:0; right:0; border:none; text-align: center" class="k-textbox" placeholder="*系统自动生成*" id="master_card_uniqueIdentifier" /></td>
                                    </tr>
                                    <tr>
                                        <th>通行证卡别：</th>
                                        <td><input type="text" readonly id="master_card_category" class="k-textbox"  /></td>
                                        <th>通行证类型：</th>
                                        <td><input type="text" readonly id="master_card_type" class="k-textbox" /></td>
                                    </tr>
                                    <tr>
                                        <th>车主姓名：</th>
                                        <td><input class="k-textbox" readonly type="text" id="master_card_ownerName" /></td>
                                        <th>车牌号：</th>
                                        <td><input class="k-textbox" readonly type="text" id="master_card_vehicleNo" /></td>
                                    </tr>
                                    <tr>
                                        <th>联系电话：</th>
                                        <td><input readonly class="k-textbox" type="text" id="master_card_ownerPhone" /></td>
                                        <th>印刷号：</th>
                                        <td><input readonly class="k-textbox" type="text" id="master_card_printingNo" /></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <p style="position: absolute; bottom: 5px; left:50%; margin-left: -91px;">此卡为副卡，以上是主卡信息</p>
                    </section>
                    <!-- 滑出层 -->

                    <div class="lonix frame" style="margin-top:25px; padding:5px;">
                        <div class="lonix frame-title">车主信息</div>
                        <div class="lonix frame-content">
                            <table style="width:100%">
                                <tr>
                                    <th>车主编号：</th>
                                    <td class="no-1-ownerCode" style="position: relative; width: 300px;"><input readonly data-bind="value:ownerCode" class="search_owner_info" style="border:none; padding:0px; position: absolute;bottom:0;left:0; width: 100%; height:100%; background-color: #eee;" /></td>
                                    <th>车主名称：</th>
                                    <td><span class="no-1-ownerName"></span></td>
                                </tr>
                                <tr>
                                    <th>所属组织：</th>
                                    <td><span class="no-1-organization"></span></td>
                                    <th>联系电话：</th>
                                    <td><span class="no-1-ownerPhone"></span></td>
                                </tr>
                                <tr>
                                    <th>联系地址：</th>
                                    <td colspan="3"><span class="no-1-ownerAddress"></span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="lonix frame" style=" margin-top:5px; padding:5px;">
                        <div class="lonix frame-title">通行证信息</div>
                        <div class="lonix frame-content">
                            <table id="need_commit_table" style="width: 100%">
                                <tr>
                                    <th>通行证编号：</th>
                                    <td colspan="3" style="position: relative;"><input readonly disabled type="text" style="position: absolute; top:0; width: 100%; left:0; right:0; border:none; text-align: center" class="k-textbox" placeholder="*系统自动生成*" data-bind="value:uniqueIdentifier" id="uniqueIdentifier" /></td>
                                </tr>
                                <tr>
                                    <th>通行证卡别：</th>
                                    <td><input class="k-textbox" type="text" readonly id="category" data-bind="value:trafficPermitCategory" /></td>
                                    <th>通行证类型：</th>
                                    <td><input class="k-textbox" type="text" readonly id="trafficType" data-bind="value:crTrafficPermitType" /></td>
                                </tr>
                                <tr>
                                    <th>当前到期时间：</th>
                                    <td><input class="k-textbox" readonly type="text" id="beginTime"  data-bind="value:beginTime" /></td>
                                    <th>充值后时间：</th>
                                    <td><input class="k-textbox" readonly type="text" id="endTime" data-bind="value:endTime" /></td>
                                </tr>
                                <tr>
                                    <th>车位数量：</th>
                                    <td><input class="k-textbox" readonly type="text" id="spaceNumber" data-bind="value:spaceNumber" /></td>
                                    <th>车牌号：</th>
                                    <td><input class="k-textbox" readonly type="text" id="vehicleNo" data-bind="value:vehicleNo" /></td>
                                </tr>
                                <tr id="trafficEntityCardParam">
                                    <th>物理卡号：</th>
                                    <td><input class="k-textbox" readonly id="phyid" placeholder="暂无" type="text" data-bind="value:physicNumber" /></td>
                                    <th>逻辑编号：</th>
                                    <td><input class="k-textbox" readonly id="rationUniqueIdentifier" placeholder="暂无" type="text" data-bind="value:rationUniqueIdentifier" /></td>
                                </tr>
                                <tr>
                                    <th>印刷号：</th>
                                    <td><input readonly class="k-textbox" id="printingNo" type="text" placeholder="暂无" data-bind="value:printingNo" /></td>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="button-frame">
                    <button class="pre-step" data-bind="click:cancel">关闭</button>
                </div>
            </div>
        </div>
    </section>
</div>
<script>
    var trafficPermitCheck = new TrafficPermitCheck($('#traffic_permit_check_frame'));
    $('#traffic_permit_check_frame #master_card_ext_info').bind('mouseup', function(e) {
        var hei = $(this)[0].offsetTop;
        if (hei == 0) {
            $(this)[0].style.top = '-235px';
        } else {
            $(this)[0].style.top = '0px';
        }
    });
</script>